<template>
	<view class="login">
		<!-- 标题 -->
		<view class="slogan">
			<view class="top1">您好</view>
			<view class="top2">加入享+，让生活更轻松</view>
		</view>
		<!-- 表单 -->
		<u--form labelPosition="left" :model="form" ref="uForm" :rules='rules'>
			<u-form-item borderBottom ref="item1" prop="mobile">
				<u--input v-model="form.mobile" placeholderStyle='color: #979797' placeholder='请输入手机号码' border="none">
				</u--input>
				<block slot='right'>
					<text v-if="isShowCountDown" class='slot-but' @click='getCode'>获取验证码</text>
					<u-count-down @finish='onfinish' v-else :time="6 * 1000" format="ss s">
					</u-count-down>
				</block>

			</u-form-item>
			<u-form-item borderBottom ref="item1" prop="code">
				<u--input maxlength='6' v-model="form.code" placeholderStyle='color: #979797' placeholder='请输入6位验证码'
					border="none">
				</u--input>
			</u-form-item>
		</u--form>
		<view class="inputxx">
			未注册手机号经验证后将自动注册
		</view>
		<!-- 登录按钮 -->
		<life-button icon='../../static/icon/login.png' @click="onlogin" bgColor="#5591AF" color="#fff">登录</life-button>
		<!-- 提示验证码 -->
		<u-notify ref="uNotify" @click.native='copyCode'></u-notify>
	</view>
</template>

<script>
	import {
		sendCode,
		login
	} from "../../api/login.js"
	export default {
		data() {
			return {
				form: {
					mobile: '18900000000',
					code: ''
				},
				code: '',
				isShowCountDown: true,
				rules: {
					mobile: [{
						required: true,
						message: '请输入手机号',
						// blur和change事件触发检验
						trigger: ['blur', 'change'],
					}, {
						pattern: /^((\+|00)86)?1((3[\d])|(4[5,6,7,9])|(5[0-3,5-9])|(6[5-7])|(7[0-8])|(8[\d])|(9[1,8,9]))\d{8}$/,
						message: '手机号码格式不正确',
						trigger: ['blur', 'change']

					}],
					code: [{
							required: true,
							message: '请输入验证码',
							// blur和change事件触发检验
							trigger: ['blur', 'change'],
						},
						{
							pattern: /^\d{6}$/,
							message: '验证码格式不正确',
							trigger: ['blur', 'change']
						}
					]
				}
			}
		},
		methods: {
			getCode() {
				// 校验手机号
				this.$refs.uForm.validateField('mobile', async (errRes) => {
					if (errRes.length) return
					console.log('校验成功')
					const res = await sendCode(this.form.mobile)
					// console.log(res)
					uni.vibrateLong()
					this.isShowCountDown = false
					this.code = res.data.code
					const message = `【享+生活】验证码：${res.data.code}.您正在使用短信验证码功能，验证码提供他人可能导致账号被盗，请勿转发或泄漏。`
					this.$refs.uNotify.show({
						top: 10,
						type: 'success',
						// color: '#000',
						// bgColor: '#e8e8e8',
						message: message,
						duration: 1000 * 3,
						fontSize: 20,
						// safeAreaInsetTop: true
					})

				})
			},
			// 复制验证码
			copyCode() {
				uni.setClipboardData({
					data: this.code
				})
			},
			// 倒计时结束
			onfinish() {
				this.isShowCountDown = true
			},
			// 登录
			async onlogin() {
				try {
					await this.$refs.uForm.validate()
					const res = await login(this.form)
					// console.log(res)
					uni.setStorageSync('userToken', res.data)
					this.$store.commit('user/setuserToken', res.data)
					uni.switchTab({
						url: '/pages/my/my'
					})
				} catch (e) {
					//TODO handle the exception
					console.log(e)
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		}
	}
</script>

<style lang='scss' scoped>
	.login {
		padding: 0rpx 30rpx;

		.slogan {
			padding: 50rpx 0rpx;

			.top1 {
				color: #333333;
				font-family: PingFang SC;
				font-weight: medium;
				font-size: 48rpx;
				line-height: 72rpx;
				letter-spacing: 0rpx;
				text-align: left;
			}

			.top2 {
				color: #333333;
				font-family: PingFang SC;
				font-weight: regular;
				font-size: 30rpx;
				line-height: 1.5;
				letter-spacing: 0rpx;
			}


		}
	}

	/* 手机验证码 */
	.slot-but {
		color: #5591AF;
		font-size: 28rpx;
	}

	/* 错误提示 */
	::v-deep .u-form-item__body__right__message {
		margin-left: 0rpx !important;
		/* margin-top: -30rpx; */
	}

	/* 表单 */
	.inputxx {
		color: #C3C3C5;
		font-size: 26rpx;
		line-height: 40rpx;
		letter-spacing: 0rpx;
		text-align: left;
		margin-top: 30rpx;
	}

	::v-deep .u-form-item__body {
		height: 103rpx;
		padding: 0rpx !important;
	}
</style>
